<script>
    $(document).ready(function() {
      /****************************************************/
        $("#dialogeditarestado").dialog({
            height: 'auto',
            width: 'auto',
            autoOpen: false,
            modal: true,
            show: {
                effect: "blind",
                duration: 300
            },
            hide: {
                effect: "blind",
                duration: 300
            }
        }).css("font-size", "15px", "width", "auto");
        $('#dialogeditarestado').submit(function(e) {
            e.preventDefault();
        });
        /****************************************************/
        mostrarDatos();
    });
    //FUNCION PARA MOSTRAR DATOS DE LA TABLA
    function mostrarDatos() {
        $.ajax({
            url: 'http://localhost:26/ecomerce/ventas/listaventas',
            dataType: 'json',
            beforeSend: function() {
                $('#tablaventas').html("<center><img src='/ecomerce/css/img/ajax_small.gif'/></center>");
            },
            success: function(data) {

                if (data) {
                    var tabla = '<table>';
                    tabla += '<tr>';
                    tabla += '<th>Id Venta</th><th>Estado</th><th>Cliente</th><th>Fecha</th><th>Total</th>';
                    tabla += '</tr>';
                    $.each(data, function(index, item) {
                        tabla += '<tr>';
                        tabla += '<td>' + item.venta.id + '</td>';
                        tabla += '<td>' + item.venta.estado + '</td>';
                        tabla += '<td>' + item.venta.user_id + '</td>';
                        tabla += '<td>' + item.venta.fecha + '</td>';
                        tabla += '<td>' + item.venta.total + '</td>';
                        tabla += '<td><button type="button" class="editar" data-id="' + item.venta.id + '">Cambiar Estado</button></td>';
                        tabla += '</tr>';

                    });
                    tabla += '</table>';
                    $('#tablaventas').html(tabla);
                } else {
                    tabla = '<center>No hay ventas en la base de datos</center>';
                    $('#tablaventas').html(tabla);
                }

            }
        });
    }
    $(document).on('click', '.editar', function() {
         idv = $(this).attr('data-id');
       
          $.ajax({
            url: 'http://localhost:26/ecomerce/ventas/view/'+idv,
            dataType: 'json',
            success: function(data) {
              $("#estadoinput").val(data.venta.estado);
              $("#dialogeditarestado").dialog("open");
            }

        });

    });
      $(document).on('click', '#guardarestado', function() {
         var estado=$("#estadoinput").val();
    
          cambiarestado(idv,estado);
    });
    $(document).on('change', '#algo', function() {
        var id = $("#select-estado").val();
        $("#estadoinput").val(id);
        
    });
    function cambiarestado(id,cambio){
         $.ajax({
            url: 'http://localhost:26/ecomerce/ventas/estadoventas/' + id +'/'+ cambio ,
            dataType: 'json',
            type: "POST",
            success: function(data) {
                alert("Editado con exito");
            }

        });
    }
</script>
<br><br><hr>
<div id="tablaventas">
</div>

<div id="dialogeditarestado" title="Cambiar estado">
    <form id="estadoventa">
        <input id="estadoinput" name="estado" type="text">
        <div id="algo">
            <select id="select-estado"> 
                <option value="pendiente">Seleccione Estado</option>
                <option value="pendiente">Pendiente</option>
                <option value="venta sin entrega">Venta Sin entrega</option>    
                <option value="venta con entrega">Venta Con entrega Exitosa</option>    
            </select>   
        </div>
        <button type="button" id="guardarestado"> Guardar </button>
    </form>
</div>